<script setup lang="ts">
import SimpleCard from "../../components/SimpleCard.vue";
import RecommendationSection from "./components/RecommendationSection.vue";
import QuestionTable from "../../components/QuestionTable.vue";
import Calendar from "./components/Calendar.vue";
import TableToolBar from "../../components/TableToolBar.vue";
import {onMounted, ref} from 'vue'
import {CarouselVO, ConfigControllerService, SetControllerService, SetVO} from "../../../generated";
import {useRouter} from 'vue-router';
import HotQuestionTable from "./components/HotQuestionTable.vue";
import RecentUpdateQuestionTable from "./components/RecentUpdateQuestionTable.vue";

interface FilterConditions {
  difficulty: string
  status: number | ''
  tag: string[]
  questionSet: string
  searchInput: string
}

const setList = ref<SetVO[]>([])

const recommendations = ref<CarouselVO[]>([
  {
    id: "1",
    imageUrl: 'https://pic.leetcode.cn/1732261324-hlPHvq-CN.png?x-oss-process=image%2Fformat%2Cwebp',
  },
  {
    id: "2",
    imageUrl: 'https://pic.leetcode.cn/1672051517-bpQKao-%E7%AE%97%E6%B3%95%E8%AE%AD%E7%BB%83%E8%90%A5.png?x-oss-process=image%2Fformat%2Cwebp',
  },
  {
    id: "3",
    imageUrl: 'https://pic.leetcode.cn/1679560797-qgkqyL-%E9%A2%98%E5%BA%93%20(4).png?x-oss-process=image%2Fformat%2Cwebp',
  },
  {
    id: "4",
    imageUrl: 'https://pic.leetcode.cn/1671096881-yhwpwz-%E7%83%AD%E6%8B%9B%E6%8A%80%E6%9C%AF%E5%B2%97%E4%B8%8A%E5%B2%B8%E6%8C%87%E5%8D%97%20%E9%A2%98%E5%BA%93:%E5%AD%A6%E4%B9%A0.png?x-oss-process=image%2Fformat%2Cwebp',
  },
  {
    id: "5",
    imageUrl: 'https://pic.leetcode.cn/1679560797-qgkqyL-%E9%A2%98%E5%BA%93%20(4).png?x-oss-process=image%2Fformat%2Cwebp',
  },
  {
    id: "6",
    imageUrl: 'https://pic.leetcode.cn/1732261324-hlPHvq-CN.png?x-oss-process=image%2Fformat%2Cwebp',
  },
  {
    id: "7",
    imageUrl: 'https://pic.leetcode.cn/1673408833-KhXTaR-%E9%A2%98%E5%BA%93.png?x-oss-process=image%2Fformat%2Cwebp',
  },
])

// 修改筛选条件的初始值
const filterConditions = ref<FilterConditions>({
  difficulty: '',
  status: 0,  // 设置默认值为 0，表示"未开始"
  tag: [],
  questionSet: '',
  searchInput: ''
})

// 处理筛选条件更新
const handleFilterUpdate = (filters: FilterConditions) => {
  filterConditions.value = filters
}

const router = useRouter();

const handleViewMore = () => {
  router.push('/studyplan');
}

const getCarousel = async () => {
  let res = await ConfigControllerService.getCarouselUsingGet();
  if (res.data && res.data?.length > 0) {
    recommendations.value = res.data
  }
}

onMounted(async () => {
  let res = await SetControllerService.listHomeUsingGet();
  await getCarousel()
  if (res.data) {
    setList.value = res.data;
  } else {
    setList.value = [];
  }
})

</script>

<template>
  <el-container class="responsive-container">
    <el-main>
      <RecommendationSection :recommendations="recommendations"/>
      <div class="section">
        <div v-if="setList.length" class="section-header">
          <h2>学习计划</h2>
          <el-link type="primary" @click="handleViewMore">查看更多</el-link>
        </div>
        <div class="cards-grid">
          <SimpleCard
              v-for="set in setList"
              :id="set.id"
              :key="set.id"
              :title="set.title"
              :description="set.target"
              :image-url="set.cover"
          />
        </div>
      </div>
      <TableToolBar @update-filters="handleFilterUpdate"/>
      <QuestionTable :filters="filterConditions"/>
    </el-main>
    <el-aside class="calendar-aside" width="auto">
      <div class="calendar-wrapper">
        <Calendar/>
        <HotQuestionTable class="hot-questions-wrapper"/>
        <RecentUpdateQuestionTable class="recent-update-questions-wrapper"/>
      </div>
    </el-aside>
  </el-container>
</template>

<style scoped>
.responsive-container {
  display: flex;
  gap: 20px;
}

.section {
  margin-bottom: 32px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.section-header h2 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.calendar-aside {
  margin: 0 auto;
}

.calendar-wrapper {
  position: sticky;
  top: 20px;
  padding: 10px 10px;
}

@media screen and (max-width: 1200px) {
  .home {
    padding: 0 16px;
  }

  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media screen and (max-width: 992px) {
  .responsive-container {
    flex-direction: column;
  }

  .calendar-aside {
    width: 100% !important;
    min-width: unset;
  }

  .calendar-wrapper {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 10px;
  }
}

@media screen and (max-width: 768px) {

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .section-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .section-header h2 {
    font-size: 16px;
  }
}

:deep(.el-carousel__arrow) {
  background-color: rgba(0, 0, 0, 0.3);
}

:deep(.el-carousel__arrow:hover) {
  background-color: rgba(0, 0, 0, 0.5);
}

:deep(.el-carousel__indicators) {
  bottom: 16px;
}

:deep(.el-carousel__button) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
}

.hot-questions-wrapper {
  margin-top: 20px;
}

.recent-update-questions-wrapper {
  margin-top: 20px;
}
</style>
